<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>帮助页轮播图</title>
  <link rel="stylesheet" href="">
  <style type="text/css" media="screen">
  html, body {
    width:80 %;
    }
  ul li {
    list-style: none;
  }
  *{margin:0;padding:0;}
  #box {
    width: 1200px;
    margin: 20px auto;
  }
  .slide {
    height: 100px;
    position: relative;
  }
  .slide ul {
    height: 100%;
  }
  .slide li {
    position: absolute;
    left:200px;
    top:0;
  }
  .slide li img{
    width: 100%;
  }
  .arraw {
    opacity: 0;
  }
  .arraw a {
    width: 70px;
    height: 110px;
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -55px;
    z-index: 999;
  }
  .next {
    background: url(img/right.png) no-repeat;
    right: -10px;
    /*opacity: .5;*/
    /*filter: alpha(opacity=50);*/
  }
  .prev {
    background: url(img/left.png) no-repeat;
    left: -10px;
  }
  </style>
</head>
<body>
<div id="box">
  <div class="slide">
   <ul>
     <li><a href="#"><img src="img/1.jpg" alt=""></a></li>
     <li><a href="#"><img src="img/2.jpg" alt=""></a></li>
     <li><a href="#"><img src="img/3.jpg" alt=""></a></li>
     <li><a href="#"><img src="img/5.jpg" alt=""></a></li>
     <li><a href="#"><img src="img/6.jpg" alt=""></a></li>
   </ul>
   <div class="arraw">
      <a href="javascript:;" class="next"></a>
      <a href="javascript:;" class='prev'></a>
   </div>
  </div>
</div>
<script>
var box = document.querySelector('#box');
var slide = document.querySelector('.slide');
var arraw = document.querySelector('.arraw');
var lis = document.querySelectorAll('li');
var json = [  //  包含了5张图片里面所有的样式
        {   //  1
            width:400,
            top:20,
            left:100,
            opacity:20,
            z:2,
            id:1
        },
        {  // 2
            width:600,
            top:70,
            left:50,
            opacity:60,
            z:3,
            id:2
        },
        {   // 3
            width:800,
            top:100,
            left:200,
            opacity:100,
            z:4,
            id:3
        },
        {  // 4
            width:600,
            top:70,
            left:550,
            opacity:60,
            z:3,
            id:4
        },
        {   //5
            width:400,
            top:20,
            left:650,
            opacity:20,
            z:2,
            id:5
        }
    ];
box.addEventListener('mouseover', function(){
  // console.log('aaa')
    animate(arraw, {opacity: 100});
});
box.addEventListener('mouseout', function(){
  // console.log('aaa')
    animate(arraw, {opacity: 0});
});

var next = document.querySelector('.next');
var prev = document.querySelector('.prev');
var timer = null;
var flag = true;
next.addEventListener('click', function(){
// alert('next');
  // console.log(json);
  // console.log('================')
clearInterval(timer);
if(flag == true){
move(true);
flag = false;
}
//console.log(json);
});
next.addEventListener('mouseleave', function(){

  clearInterval(timer);
  //alert('next')
run();
  //console.log(json);

});
prev.addEventListener('click', function(){
  clearInterval(timer);
  // alert('prev')
if(flag == true){
  move(false);
  flag = false;
}
});
prev.addEventListener('mouseleave', function(){
  // alert('prev')
// clearInterva(timer);
run();
});

move();
run();
function run(){
  clearInterval(timer);
  timer = setInterval(function(){
    // console.log('run')
  if(flag == true){
    flag = false;
    move(true);
  }
  // console.log(json)
},500);
}

function move(x){
  if(x != undefined){
    if(x){
    json.push(json.shift());
    }else{
      json.unshift(json.pop());
    };
  };

  for(var i = 0; i<json.length; i++){
    animate(lis[i],{
      width: json[i].width,
      top: json[i].top,
      left: json[i].left,
      opacity: json[i].opacity,
      zIndex: json[i].z
    },function(){flag = true;})
  };
}

   function animate(obj, json, callback){
    // 先停止定时器
      clearInterval(obj.timers);
      obj.timers = setInterval(function(){
        var stoped = true;
        // console.log('sss')
        for(var k in json){
         // var leader = parseInt(getStyle(obj, k));
         var leader = 0;
         if(k == 'opacity'){
          leader = Math.round(getStyle(obj, k)*100) || 100;
         }else {
          // console.log(json[k]);
          leader = parseInt(getStyle(obj, k)) || 0;
         };
//         console.log(leader);
         // json[k]是目标位置
         var step = (json[k]-leader)/10;
         step = step > 0? Math.ceil(step) : Math.floor(step);
         leader = leader + step;
         if(k == 'opacity'){
          obj.style[k] = leader/100;
          obj.style['filter'] = 'alpha(opacity='+ leader +')';
         }else if(k == 'zIndex'){
          obj.style['zIndex'] = json[k];
             console.log(666);
         }else{
          obj.style[k] = leader + "px";
         }
         if(leader != json[k]){
          stoped = false;
          }
         };
         if(stoped){
            // console.log('stop')
            clearInterval(obj.timers);
            callback && callback();
          };
      },50);
    };
    //获取属性值
    function getStyle(obj, attr){
      if(obj.currentStyle){
        return obj.currentStyle[attr];
      }else{
        return window.getComputedStyle(obj, null)[attr];
      };
    };
</script>
</body>
</html>
